<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>04.初体验组件化开发</title>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      // 继承react的组件类
      class App extends React.Component {
        // 组件数据，方法
        render() {
          return <h2>2323</h2>
        }
      }
      // 2. 将组件渲染到页面上
      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<App />) // 可以渲染html元素，也可以渲染自定义组件，这和vue是一样的.而且名称必须大写，小于会认为是html元素

      // root.render(App) // 这是传入类, render(<App /> => jsx => react.createElement(App)
    </script>
  </body>
</html>
